<template>
	<div class="competiton-events ">
		<div class="first-half">
			<div class="first-half-nav">
				<span class="home-school">主场学校</span>
				<span class="half-icon">上半场</span>
				<span class="visit-school">客场学校</span>
			</div>
			<div v-for="event in eventsHappened" v-if="event.time*50<=1000*60*45" :class="event.team==redTeamName?'home':'visit'" :style="{'top':'calc('+(360-38)*event.time*50/6000/45+'px)'}">
				<span class="time">  {{event.time|initTime}}分</span>
				<img v-if="event.type==4" src="../assets/inset.png" />
				<img v-if="event.type==2" src="../assets/red_card.png" />
				<img v-if="event.type==3" src="../assets/yellow_card.png" />
				<img v-if="event.type==1" src="../assets/lettle_goals.png" />
				<div>
					<div v-for="player in event.player" class="event-info">
						<span v-if="event.type==1">进球</span>
						<span v-if="event.type==2">红牌</span>
						<span v-if="event.type==3">黄牌</span>
						<span v-if="event.type==4&&player.how==1">上场</span>
						<span v-if="event.type==4&&player.how==2">下场</span>
						<span>{{player.studentName}}({{player.cloth}}号)&nbsp</span>
						<img />
					</div>	
				</div>
				

			</div>
		</div>
		<div class="second-half">
			<div class="half-icon">下半场</div>
			<div v-for="event in eventsHappened" 
				 v-if="event.time*50>1000*60*45" 
				 :class="event.team=='redTeamName'?'home':'visit'"
				 :style="{'top':'calc('+(360-38)*(90-event.time*50/6000)/45+'px)'}">
				<span class="time">{{event.time|initTime}}分</span>
				<img v-if="event.type==4" src="../assets/inset.png" />
				<img v-if="event.type==2" src="../assets/red_card.png" />
				<img v-if="event.type==3" src="../assets/yellow_card.png" />
				<img v-if="event.type==1" src="../assets/lettle_goals.png" />
				<div>
					<div v-for="(player,index) in event.player" class="event-info">
						
						<span v-if="event.type==1">进球</span>
						<span v-if="event.type==2">红牌</span>
						<span v-if="event.type==3">黄牌</span>
						<span v-if="event.type==4&&player.how==0">上场</span>
						<span v-if="event.type==4&&player.how==1">下场</span>	
						<span>{{player.studentName}}({{player.cloth}}号)&nbsp</span>
						<img />
					</div>
				</div>
				
				
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'eventsHappened',
		props:['eventsHappened','redTeamName','blueTeamName'],
		data(){
			return {
				
				
			}
			
		}
		
	}
</script>

<style scoped="scoped">
	.competiton-events{
		

		width: 100%;
		padding-bottom: 30px;
		font-size: 14px;
		
		background-color: #F2F2F2;
	}
	.first-half,.second-half{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 360px;
		text-align: center;
	}
	.first-half-nav{
		display: flex;
		width: 100%;
		height: 30px;
		margin-top: 20px;
		justify-content: space-around;
	}
	.half-icon{
		position: relative;
	
		padding:0 15px;
		line-height: 24px;
		border-radius:15px ;
		border: 4px solid white;
	}
	.half-icon::after{
		content: '';
		position: absolute;
		
		left: 50%;
		top: 28px;
		width: 4px;
		height: 310px;
		background-color: #dcdcdc;
	}
	.home,.visit{
		position:absolute ;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30%;
		line-height: 40px;
		background-color: white;
		border-radius:5px ;
		
	}
	.home{
		transform: translate(-400px);
		-webkit-transform: translate(-200px);
	}
	.visit{	
		transform: translate(100px);
		-webkit-transform: translate(200px);
		
	}
	.home::after{
		content: '';
		position: absolute;
		z-index: 4;
		right: calc( -200px + 35% + 26px);
		width: 10px;
		height: 10px;
		background-color: red;
		border: 4px solid white;
		border-radius: 50%;
	}
	.visit::after{
		content: '';
		position: absolute;
		left: calc( -200px + 35% + 30px);
		width: 10px;
		height: 10px;
		background-color: blue;
		border: 4px solid white;
		border-radius: 50%;
	}
	.home>.time{
		position: absolute;
		left:-50px
	}
	.visit>.time{
		position: absolute;
		right:-50px
	}
	.visit .event-info,.visit{
		display: flex;
		flex-direction: row-reverse;
	}
	.event-info>span{
		margin:0 10px ;
	}
</style>